<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/18 14:57:02
  @file: work-card.vue
  @description:
  ==================
  每一张卡片都需要 图片和文字
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="work-card">
    <!-- 这里通过 index % 2===0 判断 交叉图文混排格式 -->
    <template v-for="(item,index) in workLists">
      <router-link v-if="index % 2===0" :to="item.path" class="clearfix item" :key="index">
        <!-- 图片盒子 -->
        <div class="img">
          <img :src="item.images" alt="">
        </div>
        <!-- 文字盒子 -->
        <div class="content-box">
          <div class="content">
            <p class="title">{{item.title}}</p>
            <p>{{item.content}} </p>
            <img class="icon" :src="item.icon" />
          </div>
        </div>
      </router-link>
      <router-link v-else :to="item.path" class="clearfix item" :key="index">
        <!-- 文字盒子 -->
        <div class="content-box">
          <div class="content">
            <img class="icon" :src="item.icon" />
            <p class="title">{{item.title}}</p>
            <p>{{item.content}} </p>
          </div>
        </div>
        <!-- 图片盒子 -->
        <div class="img">
          <img :src="item.images" alt="">
        </div>
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  name: 'WorkCard',
  mounted () {
  },
  data () {
    return {
      workLists: [
        {
          path: '/Product',
          title: '产品',
          images: require('@/assets/images/index/work/index_yw_img1.png'),
          icon: require('@/assets/images/index/work/index_yw_icon1.png'),
          content: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测'
        },
        {
          path: '/Product',
          title: '产品',
          images: require('@/assets/images/index/work/index_yw_img1.png'),
          icon: require('@/assets/images/index/work/index_yw_icon1.png'),
          content: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测'
        },
        {
          path: '/Product',
          title: '产品',
          images: require('@/assets/images/index/work/index_yw_img1.png'),
          icon: require('@/assets/images/index/work/index_yw_icon1.png'),
          content: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测'
        },
        {
          path: '/Product',
          title: '产品',
          images: require('@/assets/images/index/work/index_yw_img1.png'),
          icon: require('@/assets/images/index/work/index_yw_icon1.png'),
          content: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试测试数据测试数据测试数据测试数据数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测'
        }
      ]
    };
  }
};
</script>

<style lang='scss' scoped>
img {
  width: 100%;
}
.work-card {
  width: 100%;
  // 每一个图文混排的外盒子
  .item {
    margin: 10px 0;
    display: inline-block;
    // 图文混排的图片
    .img {
      width: 51%;
      display: inline-block;
      overflow: hidden;
    }
    // 负责和图片框 平摊盒子宽度，根据(宽度)和(图片宽与长)的对比计算padding
    // 设置inline-blick达到有宽度的内联盒子
    // 1. 文字盒子和图片盒子 各占50%
    // 2. 文字盒子 高度 是图片 (宽px / 高px) * 图片盒子所占的宽度百分比，只有这样你的盒子的 高度才能和图片盒子的相适应
    // 3. 改成内联盒子
    // 4. 子绝父相
    .content-box {
      width: 49%;
      height: 0;
      // 坑 此处为该 work-card 图文混排的图片的 (宽px / 高px) * 图片宽度所占的百分比，图片改了你的这里的数值也要更改
      padding-bottom: (890 / 1920) * 51%;
      position: relative;
      display: inline-block;
      overflow: hidden;
      .content {
        // 文字盒子定位居中
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        // 文字盒子居中后宽度会受到压缩，因此给他一个宽度
        width: 70%;
        // 文字样式 靠左 缩进两个字符
        text-align: left;
        text-indent: 2em;
      }
      // 图文混排文字部分的 icon 位置
      .icon {
        position: absolute;
        right: 0%;
        top: 0%;
        transform: translate(100%, 0%);
        width: 80px;
      }
    }
  }
}
</style>
